<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>咱们的乐购商城</title>
    <!-- 引入重置样式 -->
    <link rel="stylesheet" href="./css/reset.css">
    <!-- 引入通用样式 -->
    <link rel="stylesheet" href="./css/common.css">
    <!-- 引入轮播插件样式 -->
    <link rel="stylesheet" href="./css/slider.css">
    <!-- 引入自己的样式 头部 -->
    <link rel="stylesheet" href="./css/header.css">
    <!-- 引入自己的样式 头部 -->
    <link rel="stylesheet" href="./css/productList.css">
    <!-- 引入jquery -->
    <script src="js/lib/jquery.js" type="text/javascript" charset="utf-8"></script>
    <!-- 引入轮播插件 -->
    <script src="./js/lib/slidebox.js"></script>
    <!-- 引入自己的JS -->
    <script src="./js/shopcart.js"></script>

    <style>
      
     
        #tab {
            width: 100%;
        }
        .data-row td:nth-child(4) {
            font-size: 30px;
        }
        .data-row td:nth-child(4) span {
            cursor: pointer;
        }
        .data-row td:nth-child(4) input {
            width: 30px;
        }
        .last-row .theme-color {
            font-size: 20px;
        }
        .data-row td:nth-child(4) span,.data-row td:nth-child(4) input {
            vertical-align: middle;
        }
        #tab {
            text-align: center;
        }
        table{
            /* 默认表格是分开的，合并表格成为整体，再给tr设置边框线即可 */
             border-collapse: collapse;
        }
        .last-row {
            border-top:2px solid #f2f2f2;
        }
        .first-row {
            border-bottom:2px solid #f2f2f2;
        }
        span {
            user-select: none;
        }
      
    </style>

</head>

<body>
    <header class="">
        <!-- 第一行 -->
        <div class="first-bar full-container">
            <div class="center clear-fix">
                <img src="./images/logo.jpg" alt="">
                <p class="fl"><a href="#" class="font-white">legochina.cn</a></p>
                <p class="fr">欢迎光临<span class="theme-color">乐购</span>,请<span>登录</span>\<span
                        class="theme-color">注册</span></p>
            </div>
        </div>
        <!-- 搜索框 -->
        <div class="center clear-fix">
            <div class="fr clear-fix search-box">
                <form id="sub-form" action="" class="fl">
                    <input type="text">
                    <input type="submit" value="" class="theme-bg">
                </form>

                <div class="fl">
                    购物车<span>3</span>
                </div>
                <div class="fl">
                    我的订单
                </div>
            </div>
        </div>
        <!-- 导航栏 -->
        <div class="nav-bar center">
            <ul class="clear-fix">
                <li>图书</li>
                <li>电子书</li>
                <li>原创文学</li>
                <li>服装</li>
                <li>运动户外</li>
                <li>儿童装</li>
                <li>家居</li>
                <li>创意文具</li>
                <li>地方特产</li>
                <li>海外购</li>
                <li>电器城</li>
            </ul>
        </div>
    </header>

    <main>
       <section class="center">
            <!-- 购物车布局 -->
        <table id="tab">
            <tr class="first-row">
                <td><input type="checkbox" class="toggleAll"/>全选</td>
                <td>商品</td>
                <td>单价</td>
                <td>数量</td>
                <td>小计</td>
                <td>操作</td>
            </tr>
            <!-- 商品明细 -->
            <tr class="data-row">
                <td><input type="checkbox"></td>
                <td><img src="./images/ebook-demo3.jpg" alt="">从你的世界路过1</td>
                <td>50.01</td>
                <td><span class="substract">-</span><input type="text" value="1"><span class="add">+</span></td>
                <td>50.01</td>
                <td><button>删除</button></td>
            </tr>
            <tr class="data-row">
                <td><input type="checkbox"></td>
                <td><img src="./images/ebook-demo3.jpg" alt="">从你的世界路过2</td>
                <td>150.01</td>
                <td><span class="substract">-</span><input type="text" value="1"><span class="add">+</span></td>
                <td>50.01</td>
                <td><button>删除</button></td>
            </tr>
            <tr class="data-row">
                <td><input type="checkbox"></td>
                <td><img src="./images/ebook-demo3.jpg" alt="">从你的世界路过3</td>
                <td>520.01</td>
                <td><span class="substract">-</span><input type="text" value="1"><span class="add">+</span></td>
                <td>50.01</td>
                <td><button>删除</button></td>
            </tr>
            <tr class="data-row">
                <td><input type="checkbox"></td>
                <td><img src="./images/ebook-demo3.jpg" alt="">从你的世界路过4</td>
                <td>50.01</td>
                <td><span class="substract">-</span><input type="text" value="1"><span class="add">+</span></td>
                <td>50.01</td>
                <td><button>删除</button></td>
            </tr>
            <tr class="last-row">
                <td>
                    <input type="checkbox" class="toggleAll">全选
                </td>
                <td class="delSelected">
                    删除已选商品
                </td>
                <td colspan="2">
                    已选<span class="theme-color">0</span>件商品
                </td>
                <td>
                    总价<span class="theme-color">0</span>
                </td>
                <td>
                    结算
                </td>
            </tr>
        </table>
       </section>

    </main>

    <footer class="center">
        <img src="./images/footer.png" alt="">
    </footer>

</body>
</html>